<template>
  <div>
    <Card dis-hover style="margin: 10px">
      <Form ref="queryForm" :model="dataToQuery" :label-width="120">
          <Row v-show="!switchFlag" class="query-form" >
              <i-col span="8">
                  <FormItem label="问题类型：">
                      <Select class="query-form-el" placeholder="请选择事件类型" type='text' v-model='dataToQuery.problemType'>
                          <Option v-for="item in problemTypeList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                      </Select>
                  </FormItem>
              </i-col>
              <i-col span="8">
                  <FormItem label="反馈人：">
                      <Input v-model="dataToQuery.feedbackUser" placeholder="请填写反馈人"/>
                  </FormItem>
              </i-col>
              <i-col span="8">
                  <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开<Icon type="ios-arrow-down"/></Button>
                  <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                  <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
              </i-col>
          </Row>
          <Row v-show="switchFlag" class="query-form">
              <i-col span="8">
                  <FormItem label="问题类型：">
                      <Select class="query-form-el" placeholder="请选择问题类型" type='text' v-model='dataToQuery.problemType'>
                          <Option v-for="item in problemTypeList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                      </Select>
                  </FormItem>
              </i-col>
              <i-col span="8">
                  <FormItem label="反馈人：">
                      <Input v-model="dataToQuery.feedbackUser" placeholder="请填写反馈人"/>
                  </FormItem>
              </i-col>
              <i-col span="8">
                  <FormItem label="反馈人编号：">
                      <Input v-model="dataToQuery.problemNo" placeholder="请填写反馈人编号"/>
                  </FormItem>
              </i-col>
          </Row>
          <Row v-show="switchFlag" class="query-form">
              <i-col span="8">
                  <FormItem label="问题状态：">
                      <Select class="query-form-el" placeholder="请选择问题状态" type='text' v-model='dataToQuery.problemStatus'>
                          <Option v-for="item in problemStatusList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                      </Select>
                  </FormItem>
              </i-col>
              <i-col span="8">
                  <FormItem label="反馈时间：">
                      <DatePicker type="daterange" split-panels v-model='dataToQuery.createDateArr' placement="bottom-end" placeholder="请选择反馈时间" style="width: 100%" />
                  </FormItem>
              </i-col>
              <i-col span="8">
                  <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起<Icon type="ios-arrow-up" /></Button>
                  <Button @click="reset" class="ivu-btn-reset">重置</Button>
                  <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
              </i-col>
          </Row>
      </Form>
      <Row class="query-form">
          <i-col span="24">
              <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
<!--                <Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="exportFormSubmit">导出</Button>-->
          </i-col>
      </Row>
      <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" :loading='pageStatus.loading'
             border :columns="columns1"  :data="dataTable" >
      </Table>
      <Row style="margin-right:10px;">
          <i-col span="24" >
              <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
          </i-col>
      </Row>
      <Modal  title="在线问题反馈" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"  :width=800  class-name='limit-height-dialog'>
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'rpt-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?170:null" :label-position="mode === 'view'?'right':'top'">
              <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
                  <i-col span="12">
                      <FormItem label='问题类型：' prop='problemType'>
                          <div v-if="mode === 'view'">{{ problemTypeList[dataToView.problemType]['codingName']  }}</div>
                          <Select class="query-form-el" placeholder="请选择事件类型" type='text' v-model='dataToView.problemType' v-else>
                              <Option v-for="item in problemTypeList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                          </Select>
                      </FormItem>
                  </i-col>
                  <i-col span="12">
                      <FormItem label='问题状态：' prop='problemStatus' v-if="currentUser.loginId === Common.admin || currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined">
                          <div v-if="mode === 'view'">{{  this.problemStatusList[dataToView.problemStatus]['codingName'] }}</div>
                          <Select class="query-form-el" placeholder="请选择问题状态" type='text' v-model='dataToView.problemStatus' v-else>
                              <Option v-for="item in problemStatusList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                          </Select>
                      </FormItem>
                  </i-col>
              </Row>
              <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
                  <i-col span="24">
                      <FormItem label='问题描述：' prop='problemDescription'>
                          <div v-if="mode === 'view'">{{  dataToView.problemDescription }}</div>
                          <Input v-else class='' type='textarea' v-model='dataToView.problemDescription' :rows="4"/>
                      </FormItem>
                  </i-col>
              </Row>
              <Row type="flex" justify="space-around" class="code-row-bg" :gutter="16">
                  <i-col span="24">
                      <FormItem label='附件上传'>
                          <div v-if="mode === 'view'">
                              <div class="demo-upload-list" v-for="item in uploadList">
                                  <template>
                                      <img :src="item.picture">
                                      <div class="demo-upload-list-cover">
                                          <Icon type="ios-eye-outline" @click.native="handleView(item.id)"></Icon>
                                      </div>
                                  </template>
                              </div>
                          </div>
                          <div v-else>
                              <Upload ref="upload"
                                      :before-upload="beforeUpload1"
                                      :show-upload-list="true"
                                      :max-size="10240"
                                      :format="['jpg','jpeg','png']"
                                      multiple
                                      type="drag"
                                      :action="fileUrl">
                                <div style="padding: 10px">
                                  <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                                  <p>点击将文件拖拽到这里上传</p>
                                  <span style="font-size:8px;color: #797a64">支持扩展名：.jpg .jpeg .png</span>
                                </div>
                              </Upload>
                              <div v-show="uploadList.length>0" v-for="item in uploadList" :key='item'>
                                  <a @click="downloadFile1(dataToView.id,item)">{{ item.fileName }}</a>
                                  <Button type="text" icon="md-trash" @click="remove1(item.id)"
                                          style="margin-left: 5px;margin-bottom: 3px"/>
                              </div>
                          </div>
                      </FormItem>
                  </i-col>
              </Row>
          </Form>
          <div slot="footer">
              <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
              <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
              <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
          </div>
      </Modal>
    </Card>
  </div>
</template>

<script>
  import {Api} from '@/api/index.js'
  import {formatDate} from '@/tools/index'
  var cascaderDom = () => import('@/components/cascader-dom.vue');
  import pageCommonFunction from '@/components/pageCommonFunction.js'

  export default {
      name: "problemFeedbackList",
      data() {
          return {
              ...this.createCommonDataField(),
              columns1: [
                  { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                  { key:'problemType',title: '问题类型',  align: 'center', minWidth:150,
                      render: (h, params) => {
                          return h('span', params.row.problemType !== null ? this.problemTypeList[params.row.problemType]['codingName']: '')
                      }
                  },
                  { key:'createDate',title: '反馈时间',  align: 'center' , render: (h, params)=>{return h('span', params.row.createDate && formatDate(new Date(params.row.createDate),'yyyy-MM-dd hh:mm:ss') )}, minWidth:160},
                  { key:'feedbackUser',title: '反馈人',  align: 'center', render: (h, params)=>{return h('span', params.row.feedbackUser)}, minWidth:160 },
                  { key:'problemNo',title: '反馈人编号',  align: 'center', render: (h, params)=>{return h('span', params.row.problemNo)}, minWidth:160 },
                  { key:'problemStatus',title: '问题状态',  align: 'center', width: 140, render: (h, params) => {
                      let title = params.row.problemStatus !== null ? this.problemStatusList[params.row.problemStatus]['codingName']: '';
                      let color = 'primary'
                      if(title === '未受理'){
                          color = 'error';
                      }else if(title === '暂缓解决'){
                          color = 'warning';
                      }else if(title === 'pw-00002000000003'){
                          color = '已解决';
                      }
                      return h('Div', [
                          h('Tag', {
                              props: {
                                  color: color,
                                  type: 'border'
                              }
                          }, title)
                      ])
                  }},
                  { key:'ifShow',title: '审批状态',  align: 'center', minWidth:150,
                      render: (h, params) => {
                          return h('span', params.row.ifShow == 0 ? '未审批': '已审批')
                      }
                  },
                  { key:'problemDescription',title: '问题描述',  align: 'center', width: 200 , tooltip: true},
                  this.getActionColumns2(),
              ],
              tableHeight:10,
              ruleCustom: {
                  problemType: [ { required: true, message: ' ', trigger: 'change' } ],
                  problemStatus: [ { required: true, message: ' ', trigger: 'change' } ],
                  problemDescription: [ { required: true, message: ' ', trigger: 'change' } ],
              },
              queryUrl:Api.queryProblemFeedback,
              exportUrl:Api.exportProblemFeedback,
              deleteUrl:Api.deleteProblemFeedback,
              getUrl:Api.getProblemFeedback,
              updateUrl:Api.updateProblemFeedback,
              saveUrl:Api.saveProblemFeedback,
              problemTypeList: [],
              problemStatusList: [],
              fileUrl: Api.interestedPartiesUserFile,
              uploadList:[],
          };
      },
      async mounted() {
          await this.$http.get(Api.queryCodeDetailBySortId + '/pw-00001', {params: {}}).then((res) => {
              this.problemTypeList = this.dictListToMap(res.data.data);
          });
          await this.$http.get(Api.queryCodeDetailBySortId + '/pw-00002', {params: {}}).then((res) => {
              this.problemStatusList = this.dictListToMap(res.data.data);
          });
          this.setTableHeight();
          this.query();
      },
      methods: {
          ...pageCommonFunction,
          query() {
              if(this.dataToQuery.createDateArr != undefined && this.dataToQuery.createDateArr.length!=0){
                  if(this.dataToQuery.createDateArr[0] != '') this.dataToQuery.startDate = this.dataToQuery.createDateArr[0];
                  if(this.dataToQuery.createDateArr[1] != '') this.dataToQuery.endDate = this.dataToQuery.createDateArr[1];
              }
              if(this.currentUser.loginId === this.Common.admin || this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined){
                  this.dataToQuery.ifShow = 1;
              }else{
                  this.dataToQuery.ifShow = 0;
              }
              this.queryAjax();
          },
          switchQuery(flag) {
              this.switchFlag = flag;
              if (!this.switchFlag) {
                  this.tableHeight = this.tableHeight + 44;
              } else {
                  this.tableHeight = this.tableHeight - 44;
              }
          },
          submit(name) {
              if(this.mode != 'edit'){
                  this.dataToView.problemNo = this.currentUser.loginId;
                  if(this.problemStatusList.length != 0) this.dataToView.problemStatus = this.problemStatusList['pw-00002000000001']['codingCodeId'];
                  this.dataToView.feedbackUser = this.currentUser.userName;
                  this.dataToView.createUserId = this.currentUser.userId;
              }else{
                  this.dataToView.updateUserId = this.currentUser.userId;
              }
              this.submitAjax(name);
          },
          deleteData(params) {
              this.$set(params.row, 'id', params.row.id);
              this.deleteDateAjax(params);
          },
          examineData(params){
              this.$Modal.confirm({
                  title: '提示',
                  content: '<p>确认审批此行数据？</p>',
                  onOk: () => {
                      let data = {...params.row};
                      data.ifShow = params.row.ifShow == 0? 1:0;
                      this.$http.put(Api.updateProblemFeedback, data).then((res) => {
                          this.$Message.success({ content: '更新成功', duration: 4 });
                          this.queryAjax();
                      }).catch(e => {
                          this.$Message.error({ content: '更新失败', duration: 4 });
                      })
                  },
                  onCancel: () => {
                  }
              });
          },
          getActionColumns2(noRender){
              return {
                  title: '操作',
                  key: 'action',
                  fixed: 'right',
                  width: 200,
                  align: 'center',
                  render: (h, params) => {
                      if (noRender instanceof Function && noRender(params)) {
                          return;
                      }
                      if (this.currentUser.loginId === this.Common.admin || this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined) {
                          return h('div', [
                              h('A', {
                                  props: {type: 'primary', size: 'small'},
                                  style: {fontSize: '14px',},
                                  on: {
                                      click: () => {
                                          this.viewData(params);
                                          this.getFiles1();
                                      }
                                  }
                              }, '详情'),
                              h('Divider', {props: {type: 'vertical'}}, ''),
                              h('A', {
                                  props: {type: 'primary', size: 'small'},
                                  disabled: true,
                                  style: {fontSize: '14px'},
                                  on: {
                                      click: () => {
                                          this.editData(params);
                                          this.getFiles1();
                                      }
                                  }
                              }, '修改'),
                              h('Divider', {props: {type: 'vertical'}}, ''),
                              h('A', {
                                  props: {type: 'primary', size: 'small'},
                                  disabled: true,
                                  style: {fontSize: '14px'},
                                  on: {
                                      click: () => {
                                          this.examineData(params);
                                      }
                                  }
                              }, '审核'),
                              h('Divider', {props: {type: 'vertical'}}, ''),
                              h('A', {
                                  props: {type: 'primary', size: 'small'},
                                  style: {fontSize: '14px', color: 'red'},
                                  on: {
                                      click: () => {
                                          this.deleteData(params);
                                      }
                                  }
                              }, '删除')
                          ]);
                      } else if(this.currentUser.userId === params.row.createUserId ){
                          return h('div', [
                              h('A', {
                                  props: {type: 'primary', size: 'small'},
                                  style: {fontSize: '14px',},
                                  on: {
                                      click: () => {
                                          this.viewData(params);
                                          this.getFiles1();
                                      }
                                  }
                              }, '详情'),
                              h('Divider', {props: {type: 'vertical'}}, ''),
                              h('A', {
                                  props: {type: 'primary', size: 'small'},
                                  disabled: true,
                                  style: {fontSize: '14px'},
                                  on: {
                                      click: () => {
                                          this.editData(params);
                                          this.getFiles1();
                                      }
                                  }
                              }, '修改'),
                              h('Divider', {props: {type: 'vertical'}}, ''),
                              h('A', {
                                  props: {type: 'primary', size: 'small'},
                                  style: {fontSize: '14px', color: 'red'},
                                  on: {
                                      click: () => {
                                          this.deleteData(params);
                                      }
                                  }
                              }, '删除')
                          ]);
                      } else {
                          return h('div', [
                              h('A', {
                                  props: {type: 'primary', size: 'small'},
                                  style: {fontSize: '14px',},
                                  on: {
                                      click: () => {
                                          this.viewData(params);
                                      }
                                  }
                              }, '详情'),
                              h('Divider', {props: {type: 'vertical'}}, ''),
                              h('A', {
                                  props: {type: 'primary', size: 'small'},
                                  style: {fontSize: '14px', color: '#c5c8ce'}
                              }, '修改'),
                              h('Divider', {props: {type: 'vertical'}}, ''),
                              h('A', {
                                  props: {type: 'primary', size: 'small'},
                                  style: {fontSize: '14px', color: '#c5c8ce'}
                              }, '删除')
                          ]);
                      }
                  }
              }
          },
          beforeUpload1(file) {
              if(file.type.indexOf("image") == -1){
                  this.$Notice.warning({
                      title: '文件格式不正确',
                      desc: '附件' + file.name + '格式不正确, 请上传jpg或png.'
                  });
                  return;
              }
              let formData = new FormData();
              formData.append("files", file); // 文件对象
              let url = this.fileUrl + '/' + this.dataToView.id + '/files/picture'
              this.$http.post(url, formData).then((res) => {
              if (res.data.result == "success") {
                  this.$Message.info("文件上传成功")
                  this.getFiles1();
              }
              })
              return false
          },
          getFiles1() {
              let url = this.fileUrl + '/' + this.dataToView.id + '/files/picture'
              this.$http.get(url).then((res) => {
              if (res.data.result == "success") {
                  console.log(res.data)
                  this.uploadList = res.data.data
              }
              })
          },
          remove1(id) {
              let url = this.fileUrl + '/file/' + id;
              this.$http.delete(url).then((res) => {
              this.getFiles1()
              })
          },
          downloadFile1(guideId, file) {
              let url = this.fileUrl + '/file/' + file.id;
              this.$http.get(url, {
              responseType: 'blob'      //告诉服务器我们需要的响应格式
              }).then((res) => {
              const aLink = document.createElement("a");
              let blob = new Blob([res.data], {
                  type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
              });
              aLink.href = URL.createObjectURL(blob)
              aLink.download = file.fileName //标题
              aLink.click()
              document.body.appendChild(aLink)
              })
          },
          handleFormatError(file){
              this.$Notice.warning({
                  title: '文件格式不正确',
                  desc: '附件' + file.name + '格式不正确, 请上传jpg或png.'
              });
          },
          get_uuid() {
              let s = [];
              let hexDigits = "0123456789abcdef";
              for (let i = 0; i < 36; i++) {
                  s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
              }
              s[14] = "4";
              s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
              s[8] = s[13] = s[18] = s[23] = "-";

              let uuid = s.join("");
              let reg = new RegExp("-", "g");
              let a = uuid.replace(reg, "");
              return a;
          },
      }
  }
</script>

<style scoped>
  .demo-upload-list{
      display: inline-block;
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      border: 1px solid transparent;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0,0,0,.2);
      margin-right: 4px;
  }
  .demo-upload-list img{
      width: 100%;
      height: 100%;
  }
  .demo-upload-list-cover{
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0,0,0,.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover{
      display: block;
  }
  .demo-upload-list-cover i{
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
  }
</style>
